<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>天天惠</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/shoujisc.css">
<link rel="stylesheet" type="text/css" href="/static/css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/my.css">
<script type="text/javascript" src="/static/js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="/static/js/xujianbanner.js"></script>
<script type="text/javascript" src="/static/js/myinit.js"></script>
<script type="text/javascript" src="/static/js/cook_shop_cart.js"></script>
<style type="text/css">
.ui-input-text {
	height: 32px;
	padding-top: 0px;
	padding-bottom: 0px;
	border: 1px solid #FFB366;
}
.myserch {
	display: inline-block;
	margin-right: 50px;
	margin-left: 50px;
	margin-top: 8px;
}
.ui-input-text input {
	height: 32px;
	line-height: 32px;
	font-size: 14px;
	padding: 0px 0px 0px 0px;
}
.mypannelshow {
	transform: translateX(0);
	transition-duration: 200ms;
}
.mypannelhide {
	transform: translateX(-100px);
	transition-duration: 200ms;
}
</style>
<script type="text/javascript">

</script>
</head>
<body>
<div data-role="page" id="home"> 
    <!--panner start  --> 
    <!--panner end -->
    <div data-role="header" style="background-color:#FF8000;height:48px;border-bottom-width: 0px;top:0px" data-position="fixed" data-tap-toggle="false"> <img src="/static/img/fenlei.png" style="top:11px;width:25px;height:25px;left:12.5px" class="ui-btn-left" id="tocagagory"><img src="/static/img/tiantianhui.png" style="margin-left: 20px;left:30px;width: 25px;margin-top: 11px;" class="ui-btn-left">
        <input placeholder="请输入您需要的商品" id="serch_input"/>
        <img src="/static/img/sjsc-13.png" style="top:11px;width:25px;height:25px;right:12.5px" class="ui-btn-right" id="serche"> </div>
    <!--reallbody start  -->
    <div role="main" class="ui-content" id="main">
        <div data-role="listview" id="cagatorylist" class="mypannelhide" style="overflow:auto;top: 48px;width: 100px;position:fixed;z-index:99;bottom:50px;display:none;background-color:white"> </div>
        <div class="ssjg" style="padding-bottom:0;">
            <div style="color:#F44;font-size:18px;text-align:center;margin-top:15px;margin-bottom:15px;" id="title"></div>
            <div style="clear:both;"></div>
            <ul class="ssjg-ul1" style="padding-top:0;" id="goods">
            </ul>
            <div style="clear:both"></div>
             
        </div>
        <hr style="border-bottom:0px;border-color: rgba(180, 189, 99,0.3);margin-top:0px;margin-bottom:0px">
        
        <div style="text-align:center;background-image:url('/static/img/tiantianhuiwang.png');background-position:center;background-repeat:no-repeat;background-size:auto 50px;height:50px;margin-bottom:50px;background-color: #F7F7F7;">
            <div></div>
        </div>
        <div style="position:fixed;bottom:60px;right:10px;width:40px;height:40px;display:inline-block;background-position:center;background-image:url('/static/img/backtotop.png');background-repeat:no-repeat;background-size:100% 100%;" id="to_top"></div>
    </div>
    <!--reallbody end  -->
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <ul class="quanbu-ul1" id="bottom_menu">
            <li class="current"  id="toindex">
                <div class="qu-tu1"> <a  class="atu1"><img src="/static/img/sjsc-02.png"></a> <a  class="atu2"><img src="/static/img/shouye.png"></a> </div>
                <a class="qu-ul1a" style="color:#313131;">首页</a> </li>
            <li id='talktokefu' >
                <div class="qu-tu1"> <a href="#" class="atu1"><img src="/static/img/sjsc-16.png"></a> <a href="#" class="atu2"><img src="/static/img/sjsc-16-1.png"></a> </div>
                <a   class="qu-ul1a" style="color:#313131">客服在线</a> </li>
            <li style="position:relative" id="toshoppindlist">
                <div style=" background-color: rgb(210, 36, 36); border-radius: 50px; width: 12px; height: 12px; text-align: center; line-height: 12px; font-size:8px;font-weight:lighter;color: white; right: 25%;position:absolute;display:none;text-shadow:none" id="cart_total"></div>
                <div class="qu-tu1"> <a class="atu1"><img src="/static/img/sjsc-17.png"></a> <a class="atu2"><img src="/static/img/sjsc-17-1.png"></a> </div>
                <a class="qu-ul1a" style="color:#313131">购物车</a> </li>
            <li id="towode">
                <div class="qu-tu1"> <a  class="atu1"><img src="/static/img/sjsc-18.png"></a> <a   class="atu2"><img src="/static/img/sjsc18-1.png"></a> </div>
                <a  class="qu-ul1a" style="color:#313131 ">我的</a> </li>
            <div style="clear:both;"></div>
        </ul>
    </div>
</div>
<script type="text/javascript">
	var caga_id=getUrldata('CAGAID');
	var htm =getUrldata('HTM');
	var openid = getUrldata('OPENID');
	var offset_last=0;
	
	 
  
	var ww=$(document).innerWidth();
	
	$(document).on('pagebeforeshow','#home',function(){
		
		$('#home .ui-header .ui-input-text').addClass('myserch');
		$('#home .ui-header .ui-input-text').css('width',ww-100+"px");
		$('#home .ui-header .ui-input-text input').css('width',ww-125+"px");
		$('#home .ui-header .ui-input-text input').css('margin-left',25+"px");
		initGood();
		$('#title').html(htm);
		refreshCartTotal();
		
		
		
		
	});
	
	 
	
 
	
	
	
	function initGood(){
		var url = "/webserver/api/v1/good/?format=json&catagory="+caga_id+"&offset="+offset_last;
		
		 if(offset_last==0){
				$('#goods').empty();
			}
			
			
			 offset_last+=20;
		$.getJSON(url,function(rs){
			if($('#goods').find('li').length==0){
				var range = 50;             //距下边界长度/单位px        
				var totalheight = 0;
				$(window).scroll(function(){
					var srollPos = $(window).scrollTop();
					totalheight = parseFloat($(window).height()) + parseFloat(srollPos);  
					if(($(document).height()-range) <= totalheight) {
						initGood();
					}
				}); 
			}
			 
			var objects=rs.objects;
			 
			$.each(objects,function(index,item){
				$('#goods').append('<li onclick="toUrl(\'xiangqing.html?GOODID='+item.id+'&OPENID='+openid+'\')"><div class="ssjg-tu" style="background-image: url(\''+item.image_thumb+'\'); background-repeat: no-repeat; background-size: 100% auto;height:'+ww*0.48+'px;padding:0px 0px" > </div><h3><a onclick="toUrl(\'xiangqing.html?GOODID='+item.id+'&OPENID='+openid+'\')">'+item.name+'</a></h3><dl class="ssjg-dl1"><dt><p class="ssjg-p1">售价<span>￥'+item.price+'</span></p></dt> <div style="clear:both;"></div></dl></li>');
				 
			});
			
			
			
			
			 
		});
		
		 
		 
		
		
	}
	
	 
	
	function toUrl(url){
		document.location.href=url;
	}
	
	
	
	
	
	$('#tocagagory').click(function(e) {
		
		
		
		if($('#cagatorylist').find('li').length==0){
			initcagatory();
		}else{
			if($('#cagatorylist').hasClass('mypannelshow')){
				$('#cagatorylist').removeClass('mypannelshow');
				$('#cagatorylist').addClass('mypannelhide');
			}else{
				$('#cagatorylist').addClass('mypannelshow');
				$('#cagatorylist').removeClass('mypannelhide');
		
			}
			$('#cagatorylist').show();
		}
		 
	});
	
	function initcagatory(){
		var url = "/webserver/api/v1/catagory/?format=json";
		$.getJSON(url,function(rs){
			var objects=rs.objects;
			$.each(objects,function(index,item){
				$('#cagatorylist').append('<li  id="'+item.id+'">'+item.name+'</li>');
			});
			$('#cagatorylist').listview('refresh');
			$('#cagatorylist li').click(function(e) {
				var id = $(this).attr('id');
				var htm =$(this).html();
				document.location.href="list_by_caga.html?CAGAID="+id+"&HTM="+htm+"&OPENID="+openid;
			});
			
			 
			if($('#cagatorylist').hasClass('mypannelshow')){
				$('#cagatorylist').removeClass('mypannelshow');
				$('#cagatorylist').addClass('mypannelhide');
			}else{
				$('#cagatorylist').addClass('mypannelshow');
				$('#cagatorylist').removeClass('mypannelhide');
		
			}
			$('#cagatorylist').show();
		});
		
	
	}
	
	
	
	
	
	
	 
		function refreshCartTotal(){
		var num=cartHelper.getCart().count;
		if(num>0){
			$('#cart_total').html(num);
			$('#cart_total').show();
		}else{
			$('#cart_total').hide();
		}
	}
	
	$('#toindex').click(function(){
		document.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1ef1259eec8b148d&redirect_uri=http%3a%2f%2fwww.tiantianhw.cn%2fmshop%2findex.html&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
	});
	
	$('#toshoppindlist').click(function(){
		window.location.href="shoppinglist.html?OPENID="+openid;
	});
	
	
	 
	
	$('#towode').click(function(){
		document.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1ef1259eec8b148d&redirect_uri=http%3a%2f%2fwww.tiantianhw.cn%2fmshop%2fhuiyuanshouye.html&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
	});
	
	
	$('#totop').click(function(){
		$('html,body').animate({scrollTop: '0px'}, 800);
	});
	
	function toUrl(url){
		document.location.href=url;
	}
	
	$(document).scroll(function(){
		var scroll_top = $(document).scrollTop();
		var touming = 1;
		if(scroll_top<320){
			touming=scroll_top*1.0/320;
		}
		
		$('#to_top').stop().fadeTo('fast',touming)
		
		
	
	});
	
	$('#to_top').click(function(){
		$('html,body').animate({scrollTop: '0px'}, 800);
	});
	
	
	
	
	$('#serche').click(function(e) {
        var htm=$('#serch_input').val();
		if(htm!=''){
			document.location.href="sousuojieguo.html?OPENID="+openid+"&KEYWORD="+htm;
		}
	});
	
	
	 
	 
	$('#talktokefu').click(function(){
		document.location.href="chatwithkefu.html?OPENID="+openid;
	});
	
 

</script>
</body>
</html>
